<template>
<div id="app">
   <!-- 头部 -->
        <div class="boxh">
            <a href="">
                <h4>课程</h4>
            </a>
            <div class="nav">
                <i class="iconfont icon-sousuo" @click="sear"></i>
                <input type="text" placeholder="搜索课程" id="ss" v-model="search" @keyup.enter="fn">
            </div>

        </div>
        <!-- 身体 -->
        <div class="st">
            <ul class="box-s1">
                <li :class="{active:allIndex===-1}" @click="cli2">全部</li>
                <li v-for="(item,i) in fenleiList" :key='item.sysId' :class='{active:allIndex===i}' @click="cli(i,item.sysId)">{{item.title}}</li>
            </ul>
            <!-- 2 -->
            <ul class="box2">
                <li class="box-s2" v-for="item in imgList" :key='item.ID' @click="line(item.ID)">
                <a >
                    <img :src="item.Cpic" alt="">
                </a>
                <div class="box-s2t">
                    <h3>{{item.Cname}}</h3><span>3天前</span>
                </div>
                <div class="box-s2o">
                    <p>
                        <span class="shu"><img src="../assets/img/教育APP切图/课程分类/学习@2x.png" alt=""></span>
                        <span>2058人学过</span>
                    </p>
                    <p>
                        <span class="xiao"><img src="../assets/img/教育APP切图/课程分类/评论@2x.png" alt=""></span>
                        <span>113</span>
                        <span class="star"><img src="../assets/img/教育APP切图/课程分类/收藏.png" alt=""></span>
                    </p>
                </div>
            </li>
        </ul>
        </div>
        <div class="gd"></div>
    <my-footer></my-footer>

  </div>
</template>

<script>
import myFooter from '@/components/myFooter.vue'
import {allList, listPoint} from '@/api/myTitle'

export default {
  name: 'myTitle',
  data() {
      return {
          fenleiList:'',
          allIndex:-1,
          imgList:'',
          id:"",
          search:''
      }
  },
  components: {
    myFooter
  },
  methods:{
      line(e){
            this.$router.push({
                path:'/couresVideo',
                name:'视频',
                query:{
                    courseId:e
                }
            })
             sessionStorage.setItem('addres','/myTitle')
        },
      cli(n,r){
         this.id=r;
         this.allIndex=r-1;
         console.log(this.id);
         this.getList('',r)
      },
      cli2(){
          this.allIndex=-1;
          this.getList('','')
      },
    //  按下回车
    fn(){
        this.getList(this.search,'')
        console.log(this.search);
    },
    sear(){
        this.getList(this.search,'')
    },
      getList(n,r){
          this.$axios({
              url:'/api/Handler/CourseHandler?action=courseshow',
              methods:'get',
              params:{
                  courseName:n,
                  sysId:r
              },
          }).then(res=>{
          if (res.success==='成功') {
                     console.log(1);
                     this.imgList=res.data.list
          }else{
                     console.log(2);
                     this.imgList=[]
                 }
      }).catch(err=>{
          console.log(err);
      })
      }
  },
  mounted() {
    //  渲染上方列表
      listPoint().then(res=>{
          if (res.success==='成功') {
            //  console.log(res.data);
              this.fenleiList=res.data;
          }
      }).catch(err=>{
          console.log(err);
      });
      //渲染数据
    allList().then(res=>{
          if (res.success==='成功') {
             this.imgList=res.data.list
          }
      }).catch(err=>{
          console.log(err);
      })
  },

}
</script>
<style scoped lang="scss" >
/* 头部 */

* {
    list-style: none;
}

.boxh h4 {
    color: #fff;
    height: 8.7rem;
    width: 100%;
    font-size: 3rem;
    line-height: 8.7rem;
}

.nav {
    input {
        width: 53.9rem;
        height: 5.6rem;
        border-radius: 5rem;
        color: #fff;
        font-size: 3rem;
        background: #5787ee;
        padding: 1rem 4rem;
    }
    position: relative;
    i {
        color: #fff;
        font-size: 2.5rem;
        position: absolute;
        right: 3.6rem;
        top: 1.5rem;
    }
}

.boxh {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #5064eb;
}


/* 身体 */

.st {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}


/* box-s1 */

.box-s1 {
    width: 100%;
    font-size: 3rem;
    color: #a6a6a6;
    display: flex;
    justify-content: space-around;
    >li {
        height: 8.8rem;
        line-height: 8.8rem;
        
    }
}
.active{
            border-bottom: 0.5rem solid #5064eb;
            color: #404040;
        }
/* 2 */

.box-s2 {
    width: 100%;
    height: 51rem;
    font-size: 2.4rem;
    color: #b3b3b3;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0 2rem;
    img {
        width: 69.8rem;
        height: 36rem;
        border-radius: 2.5rem;
    }
}

.box-s2t {
    h3 {
        font-size: 3rem;
        color: #000;
        margin-right: 2rem;
    }
    display: flex;
    align-items: center;
}

.box-s2o {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shu,
.xiao,
.star {
    display: inline-block;
}

.box-s2o {
    img {
        width: 2.4rem;
        height: 2.4rem;
    }
    p {
        width: 16.8rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
}

.none {
    font-size: 3rem;
    margin-top: 30rem;
}


/* gd */

.gd {
    width: 100%;
    height: 9.8rem;
}

.box {
    position: fixed;
    bottom: 0;
}
</style>